<template>
	<view class="cu-list menu-avatar">
		<view class="cu-item" v-for="(food,index) in guessList" :key="index">
			<view class="cu-avatar lg" :style="{ 'background-image': 'url('+food.img+')' }">
			</view>
			<view class="content">
				<view class="">{{food.name}}</view>
				<view class="text-gray text-sm flex dish-desc">
					<text>
						{{food.desc|filterDishDesc}}
					</text>
				</view>
				<view class="grid col-2 ">
					<view class="text-left">
						<text class="margin-right-xs">￥{{food.price}}</text>
						<text class="text-gray text-sm">已订次数:{{food.count}}</text>
					</view>
	
					<view class="text-right padding-right" >
						<button v-if="food.num > 0" @click="ADD2CART({dish:food,add:false})"
							class="cu-btn sm cuIcon lines-gray round padding-sm"
							style="font-size: 40upx;">
							<text class="cuIcon-move text-lg text-bold"></text>
						</button>
						<text v-if="food.num > 0"
							class="padding-lr-xs margin-lr-sl">{{food.num}}</text>
						<button @click="ADD2CART({dish:food,add:true})"
							class="cu-btn sm cuIcon bg-orange padding-sm " style="font-size: 40upx;">
							<text class="cuIcon-add text-lg text-bold"></text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import {request} from '@/common/request.js'
	export default{
		props:{
				guessList:{
					type:Array,
					require:false
				}
		},
		data(){
			return {
				recommendList:[],
			}
		},
		onLoad(){
			this.getRecommend()
		},
		filters: {
			// 菜品介绍超出隐藏
			filterDishDesc(desc) {
				if (desc.length > 28) {
					const text = desc.replace(/[\n-]/g, ' ');
					return text.slice(0,29)
				}
				return desc
			}
		},
		method:{
			...mapMutations(['ADD2CART'])
		}
	}
</script>

<style lang="scss" scoped>
	.cu-item {
		width: 100%;
		// border-radius: 5px;
		margin-bottom: 14px;
		text-align: center;
		// background-color: #f1f1f1;
		// margin: 0;
		border: none;
		// height: 50px;
		position: relative;
		border-radius: 10px;
		background: #f1f1f1;
		box-shadow:  9px 9px 18px #e0e0e0,
		             -9px -9px 18px #fff;
	}
	
	.cu-item.cur {
		background-color: #fff;
	}
	// .cur-item .addCart{
	// 	width:48% !important;
	// }
	.cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: #f37b1d;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100% - 120upx);
	}
	
	.cu-list.menu-avatar>.cu-item {
		height: 100px;
	}
	// .grid.col-2>view {
	// 	width:48%;
	// }
</style>
